import { defineComponent } from "vue";
import { RouterView } from "vue-router";

export default defineComponent({
  name: "layout-console",
  setup(_, { slots }) {
    return () => (
      <>
        <div class={"layout-console-wrapper"}>
          <main class={"layout-console-main"}>
            <RouterView />
          </main>
          <aside class={"layout-console-aside"}>{slots.aside?.()}</aside>
          <div class={"layout-console-tab"}>{slots.tabs?.()}</div>
          <header class={"layout-console-header"}>{slots.header?.()}</header>
        </div>
        <style scoped>
          {
            `.layout-console-wrapper{
              display: grid;
              grid-gap: 1px;
              grid-template:
                "header header" 60px
                "aside tab" 50px
                "aside main" 1fr / 240px 1fr;
              height: 100vh;
              width: 100vw;
              background-color: lightgray;
            }
            .layout-console-wrapper>*{
              background-color: white;
            }
            .layout-console-main {
              grid-area: main;
            }
            .layout-console-header {
              grid-area: header;
            }
            .layout-console-tab {
              grid-area: tab;
            }
            .layout-console-aside {
              grid-area: aside;
            }`
          }
        </style>
      </>
    );
  },
});
